<template>
  <div class="w-full">
    <div class="mb-5" style="height: calc(100% - 40px);">
      <div class="p-5 bg-white rounded-[6px] mb-6">
        <div class="flex justify-between items-center">
          <el-breadcrumb :separator-icon="ArrowRight" v-if="user_type == 2 || user_type == 3 || user_type == 4 || user_type == 5">
            <el-breadcrumb-item :to="{ path: user_type == 2 || user_type == 3  || user_type == 5 ? `/teacherAssessList` : '/associationAssessList' }"
                                class="text-black/[0.45]">考核汇总
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ 
                path: '/examCourses/assessDetail',
                query: {
                  id: jobId,
                  name: jobName
                }
              }"
              class="text-black/[0.45]">考核详情
            </el-breadcrumb-item>
            <el-breadcrumb-item class="text-black/[0.45]">章节汇总</el-breadcrumb-item>
          </el-breadcrumb>
          <el-breadcrumb :separator-icon="ArrowRight" v-else>
            <el-breadcrumb-item :to="{ path: `/examCourses/post` }"
                                class="text-black/[0.45]">学员岗位
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ 
                path: '/examCourses/assessList',
                query: {
                  id: jobId,
                  name: jobName
                }
              }"
              class="text-black/[0.45]">考核汇总
            </el-breadcrumb-item>
            <el-breadcrumb-item class="text-black/[0.45]">章节汇总</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="flex items-center gap-2">
            <div class="flex items-center gap-2 mr-6">
              <img src="@/assets/images/pencil-ruler-2-fill.png" alt="">
              <span class="text-black/[0.88] text-base">{{ name }}</span>
            </div>
            <div class="flex items-center gap-2">
              <img src="@/assets/images/progress-3-fill.png" alt="">
              <span class="text-black/[0.88] text-base">{{ chapterProcess }}%</span>
            </div>
          </div>
        </div>
<!--        <el-divider/>-->
<!--        <div class="flex justify-between items-center">-->
<!--          <div class="flex items-center gap-2">-->
<!--            <span class="text-black/[0.65] text-base">学习状态：</span>-->
<!--            <el-checkbox-group v-model="studyStatusList" :max="1" @change="getPaperRecord">-->
<!--              <el-checkbox class="text-black/[0.88]" label="未考核" value="1"/>-->
<!--              <el-checkbox class="text-black/[0.88]" label="待结业" value="2"/>-->
<!--              <el-checkbox class="text-black/[0.88]" label="已结业" value="3"/>-->
<!--            </el-checkbox-group>-->
<!--          </div>-->
<!--          <div class="flex items-center gap-2">-->
<!--            <el-input v-model="courseName" style="width: 240px;height: 32px;" placeholder="请输入考核名称">-->
<!--              <template #prefix>-->
<!--                <el-icon class="el-input__icon">-->
<!--                  <search/>-->
<!--                </el-icon>-->
<!--              </template>-->
<!--            </el-input>-->
<!--            <Button @click="getPaperRecord">搜索</Button>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="overflow-auto" style="height: calc(100% - 80px);">
        <div class="grid grid-cols-4 gap-4">
        <ChapterCard :cardData="cardData" @cardClick="handleCardClick"/>
      </div>
      </div>
      
    </div>
    <div class="flex justify-center items-center">
      <el-pagination
          :current-page="paginationData.currentPage"
          :page-size="paginationData.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="cardData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {ArrowRight} from '@element-plus/icons-vue'
import ChapterCard from "@/views/examCourses/components/chapterCard.vue";
import { onMounted, reactive, ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {examApi} from "@/api/index.js";
import {StorageUtil} from "@/utils/common.js";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const router = useRouter()
const route = useRoute()
const {jobId, itemId, name, jobName} = route.query
const {user_type} = userStore.userInfo || {}
const chapterProcess = ref('')
const cardData = ref([])
const paginationData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})


onMounted(() => {
  getPaperRecord()
})

//获取章节列表
const getPaperRecord = () => {
  examApi.getPaperRecord(itemId).then(({chapters, process}) => {
    cardData.value = chapters
    chapterProcess.value = process
  })
}
const handleCardClick = (row) => {
  StorageUtil.session.set('paperData', row)
  router.push({
    path: '/examCourses/chapterDetail',
    query: {
      paperId: itemId,
      chapterId: row.id
    }
  })
}

const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getPaperRecord()
}
const handleCurrentChange = (val) => {
  paginationData.currentPage = val;
  getPaperRecord()
}
</script>

<style scoped>
:deep(.el-breadcrumb__inner.is-link) {
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #33A0FF;
  font-weight: 500;
}
</style>